<template>
  <div id="map" style="width:100%;height:300px" class="map"></div>
</template>

<script setup name="map_developer">
    const emit = defineEmits(['subMapEvent'])
    const props = defineProps(['mapinfo'])
    class CoordinatePicker {
        constructor() {
            this.map = null;
            this.marker = null;
            this.currentCoords = null;
            this.init();
        }

        init() {
            this.initMap();
        }

        initMap() {
            // 初始化地图，设置默认中心点为北京
            const center = new qq.maps.LatLng(props.mapinfo.latitude?Number(props.mapinfo.latitude):28.620331,props.mapinfo.longitude?Number(props.mapinfo.longitude):115.869598);
            this.map = new qq.maps.Map(document.getElementById('map'), {
                center: center,
                zoom: 17,
                disableDefaultUI: false
            });



            this.addMarker(new qq.maps.LatLng(
                Number(props.mapinfo.latitude),
                Number(props.mapinfo.longitude)
            ));

            // 添加地图点击事件监听
            qq.maps.event.addListener(this.map, 'click', (event) => {
                console.log(event)
                this.handleMapClick(event.latLng);
            });
        }

        handleMapClick(latLng) {
            const latitude = latLng.getLat().toFixed(6);
            const longitude = latLng.getLng().toFixed(6);
            this.currentCoords = { latitude, longitude };
            console.log(latLng)
            this.addMarker(latLng);
        }

        updateCoordinateDisplay() {
            // document.getElementById('latitude').value = this.currentCoords.latitude;
            // document.getElementById('longitude').value = this.currentCoords.longitude;
        }

        addMarker(position) {
            // 移除现有标记
            if (this.marker) {
                this.marker.setMap(null);
            }
            emit("subMap",position)

            // 创建新标记
            this.marker = new qq.maps.Marker({
                position: position,
                map: this.map
            });
        }
    }



    onMounted(()=>{
        console.log("123456")
        new CoordinatePicker();
    })

</script>
